<script setup lang="tsx">
import { ref } from 'vue'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { ElTag } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
import { getDepartmentDetailApi } from '@/api/department'
import { Log } from '@/utils/logError'

const { t } = useI18n()

const props = defineProps({
  currentId: {
    type: Number,
    default: () => null
  }
})

const renderTag = (enable?: boolean) => {
  return (
    <ElTag type={enable ? 'success' : 'danger'}>
      {enable ? t('common.enable') : t('common.disable')}
    </ElTag>
  )
}

const detailSchema = ref<DescriptionsSchema[]>([
  {
    field: 'name',
    label: t('department.name')
  },
  {
    field: 'parentDeptName',
    label: t('department.parentDeptName')
  },
  {
    field: 'status',
    label: t('common.status'),
    slots: {
      default: (data: any) => {
        return renderTag(data.status)
      }
    }
  },
  {
    field: 'createAt',
    label: t('common.createTime'),
    slots: {
      default: (data: any) => {
        return <>{data.updatedAt}</>
      }
    }
  },
  {
    field: 'updateAt',
    label: t('common.updateTime'),
    slots: {
      default: (data: any) => {
        return <>{data.updatedAt}</>
      }
    }
  },
  {
    field: 'remark',
    label: t('common.remark')
  }
])

const departmentDetailData = ref()

const getDepartmentDetail = async () => {
  try {
    if (!props.currentId) return (departmentDetailData.value = {})
    const res = await getDepartmentDetailApi(props.currentId)
    departmentDetailData.value = res.data
  } catch (error) {
    Log.error('getDepartmentDetail', error)
  }
}
getDepartmentDetail()
</script>

<template>
  <Descriptions :schema="detailSchema" :data="departmentDetailData || {}" :column="1" />
</template>
